<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: flappy bird;
            src: url(fonts/FB.eot);
            src: url(fonts/FB.eot?#iefix) format("embedded-opentype"), url(fonts/FB.woff) format("woff"), url(fonts/FB.ttf) format("truetype"), url(fonts/FB.svg#04b_19regular) format("svg");
            font-weight: 400;
            font-style: normal
        }
        /*根据id选择用# */
        #game-box{
            width: 480px;
            height: 640px;
            border: 1px solid #000;
            margin: 20px auto;
            background-image: url(/images/background.png);
            background-size: contain;
            background-repeat: no-repeat;
            /* 子绝夫相*/
            position: relative;
            /*溢出盒子的内容隐藏，即出去的管子消失*/
            overflow: hidden;
        }
        #land{
            width: 480px;
            height: 80px;
            background-image: url(/images/ground.png);
            position: absolute;
            bottom: 0;
            left:0;
            background-size: auto 80px;
            /*CSS3的animation动画，3s，匀速，无限次*/
            animation: bgmove 3s linear infinite;
        }
        /*定义大地动的动画 */
        @keyframes bgmove{
            from{
                background-position: 0 0;
            }
            to{
                background-position: -100% 0;
            }
        }
        /*小鸟是精灵图，必须用背景图片制作，不能直接插入图片 */
        #bird{
            width: 57px;
            height: 40px;
            background-image: url(/images/bird.png);
            /* 精灵图定位*/
            background-position: -200% 0;
            position: absolute;
            top: 200px;
            left: 170px;
            /* CSS3的2D变形*/
            transform: rotate(30deg);
        }
        .pipe1{
            position: absolute;
            width: 88px;
            height: 100px;
            background-image: url(/images/pipe1.png);
            position: absolute;
        }
        .pipe2{
            position: absolute;
            width: 88px;
            height: 100px;
            background-image: url(/images/pipe2.png);
            background-position: bottom center;
            top: 0;
            
        }

        #land.stop {
            animation: none;
        }

        #cover{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: -webkit-radial-gradient(center center, rgb(255, 254, 254),rgb(236, 33, 33));
            visibility: hidden;
            transition: all .4s linear 0s;
        }

        #tool{
            display: none;
        }

        #score{
            position: absolute;
            width: 86px;
            height: 114px;
            background-image: url(/images/score.png);
            background-size: contain;
            left: 50%;
            margin-left: -43px;
            top: 180px;
            z-index: 999;
        }
        #restart{
            position: absolute;
            width: 107px;
            height: 37.5px;
            left: 50%;
            margin-left: -53.5px;
            top: 400px;
            z-index: 999;
            cursor: pointer;
        }
        #logo{
            position: absolute;
            top: 10px;
            left: 10px;
        }

        #main-score{
            font-family: 'flappy bird';
            font-size: 50px;
            font-weight: normal;
            color: honeydew;
            /*为了下步*/
            position: relative;
            /*二维图层叠加，设置999表示该层能一直显示在最上*/
            z-index: 999;
            text-shadow: 2px 2px 2px black;
            /*居中，也可以left:50%*/
            text-align: center;
            margin-top: 80px;
            /*文本不能被选中*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;

        }

        #s{
            margin-top: 33px;
            margin-bottom: 0px;
            text-align: center;
            font-family: 'flappy bird';
            font-size: 25px;
            text-shadow: 1px 1px 2px black;
            font-weight: normal;
            color: white;
        }

        #best{
            margin-top: 18px;
            text-align: center;
            font-family: 'flappy bird';
            font-size: 25px;
            text-shadow: 1px 1px 2px black;
            font-weight: normal;
            color: white;
        }

    </style>
</head>
<body>
    <div id="game-box"> 
        <div id="land"></div>
        <div id="bird"></div>
        <div id="cover"></div>
        <div id="tool">
            <img src="/images/logo.png" id="logo">
            <div id="score">
                <p id="s">0</p>
                <p id="best">0</p>
            </div>
            <img id="restart" src="/images/restart.png" alt="">
        </div>
        <div id="main-score">
            0
        </div>
    </div>
</body>
</html>

<script>
    //小鸟扑腾翅膀的代码：
    //小鸟下落+点击弹起：
    /*查找页面上id为bird的盒子，并且存入变量bird*/
    let bird = document.querySelector('#bird');
    const gameBox = document.querySelector('#game-box');
    let mainScore = document.querySelector('#main-score');
    let restart = document.querySelector('#restart');
    let land = document.querySelector('#land');
    let cover = document.querySelector('#cover');
    let tool = document.querySelector('#tool');
    let s = document.querySelector('#s');
    let best = document.querySelector('#best');

    let step = 0;
    let birdRotate = 0;
    //bird.style.top = '210px';
    // 定义一个变量birdTop, 这个变量表示小鸟的top值（距离顶边距离）。只是变量，所以没有单位。
    let birdTop = 200;
    //定义加速度变量
    let a = 0;
    //管子数组
    let pipes = [];
    //帧
    let f = 0;
    let score = 0;

    //管子
    //管子类
    class Pipe{
        constructor(){
            pipes.push(this);

            this.pipe1 = document.createElement('div');
            this.pipe2 = document.createElement('div');

            this.pipe1.className = 'pipe1';
            this.pipe2.className = 'pipe2';

            gameBox.appendChild(this.pipe1);
            gameBox.appendChild(this.pipe2);

            this.space = 250;

            this.pipe2Height = parseInt(Math.random() * 200) + 100;

            this.pipe1Height = 560 - this.pipe2Height - this.space;

            this.left = 480;

            this.pipe1.style['height'] = this.pipe1Height + 'px';
            this.pipe2.style['height'] = this.pipe2Height + 'px';

            this.pipe1.style['top'] = this.pipe2Height + this.space + 'px';

            this.pipe1.style['left'] = this.left + 'px';
            this.pipe2.style['left'] = this.left + 'px';

            }
            move(){
                this.left -= 5; 
                
                this.pipe1.style['left'] = this.left + 'px';
                this.pipe2.style['left'] = this.left + 'px';
            }

    };


    /*定时器，重复不停做事情，20毫秒一次*/
    let timer = setInterval(()=>{
        //帧加1
        f++;
        //AABB盒
        birdA1 = birdTop + 6;
        birdA2 = birdTop +28;
        birdB1 = 170 + 6;
        birdB2 = 170 + 45;

        birdRotate += 3;
        bird.style['transform'] = 'rotate(' + birdRotate + 'deg)';
        step++;
        if (step > 2) step = 0;
        bird.style['background-position'] = -step*100 + '% 0';
        //加速度在变化，自增1
        a += 0.5;
        //birdTop变量自增变量加速度的值
        birdTop += a;
        //变量变了，还得具体设置盒子的top值。即重复做的事情。
        bird.style.top = birdTop + 'px';

        //当点击屏幕时
        document.onclick = () =>{
            //瞬间让加速度为-15，逐渐+1变为0，然后变为正数再往下掉。
            a = -8;
            birdRotate = -80;
        };
        
        //小鸟不能飞出上边界
        birdTop += a;
        if(birdTop < 0){
            birdTop = 0;
        }
        //撞地判断调gameover函数
        if(birdA2 >= 640 - 80){
            gameover();
        }

        //每50帧new一组管子
        if (f % 50 == 0){
            new Pipe();
        }

        //更新所有管子。遍历pipes数组中的每一个管子
        pipes.forEach(item =>{
            item.move();
            //碰撞代码
            if(
                item.left < birdB2 && item.pipe2Height > birdA1 && item.left + 88 > birdB1
                ||
                item.left < birdB2 && item.pipe2Height + item.space < birdA2 && item.left + 88 > birdB1

            ) {
                //停止定时器,调用gameover函数
                gameover();
            }

            //判断加分，管子本身没有被加过分，且小鸟越过了管子
            //添加isScore属性，表明它是否已被加过分
            if(!item.isScore && item.left + 88 < birdB1){
                score ++;
                //更新分数显示
                mainScore.innerText = score;
                //将这个管子设置为已经加分
                item.isScore = true;
            }
        });

    },20);


    //游戏结束函数
    function gameover(){
        //清除定时器
        clearInterval(timer);
        //大地停止运动
        land.className = 'stop';
        cover.style['visibility'] = 'visible';
        cover.style['opacity'] = 0.6;
        tool.style['display'] = 'block';

        mainScore.style['display'] = 'none';
        //显示本局得分
        s.innerText = score;

        //本地存储
        let bestScore = localStorage.getItem('bestScore');
        if(bestScore == null){
            bestScore = score;
            localStorage.setItem('bestScore',bestScore);
        }else{
            if(score > Number(bestScore)){
                bestScore = score;
                localStorage.setItem('bestScore',bestScore);
            }
        }
        best.innerText = bestScore;
    }

    //当点击重玩按钮
    restart.onclick = () => {
        window.location.reload();
    };

    
</script>